<template>
  <div id="root" class="same_height">
    <Header></Header>
    <!-- <router-link to="/" id="go-back">
      返回首页
    </router-link> -->
    <!-- 黑色背景与对话框 -->
    <div class="bg" v-show="bgShow">
      <div class="setting-dialogue" v-show="dialogueShow" @click="changeSizeBaseOnRatio">
        <div class="dialogue-header">
          <span class="dialogue-header-left">新建画布</span>
          <span class="dialogue-header-right" @click="closeDialogue">×</span>
        </div>
        <div class="dialogue-body">
          <ul>
            <li class="sizeIpt">
              <div class="canvas-width"><label for="canvas-width">宽度:</label> <input type="text" v-model="canvasSize.width" /><span>px</span></div>
              <div class="canvas-heigth"><label for="canvas-height">高度:</label> <input type="text" v-model="canvasSize.height" /><span>px</span></div>
            </li>
            <li class="aspect-ratio">
              <input type="checkbox" class="check-box" @click="isChecked" />
              <select class="select" disabled="disabled">
                <option value="">请选择宽高比</option>
                <option>2:1</option>
                <option>4:3</option>
                <option>1:1</option>
                <option>3:4</option>
                <option>1:2</option>
              </select>
            </li>
            <li class="dialogue-button">
              <Button type="primary" class="dialogue-confirm" @click="confirmCanvas">确认</Button>
              <Button type="primary" class="dialogue-cancel" @click="closeDialogue">取消</Button>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="wrap">
      <div class="design-panel">
        <el-row class="tac">
          <el-col :span="24">
            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" :collapse="true" @close="handleClose">
              <!--素材库-->
              <el-submenu index="素材">
                <template slot="title">
                  <i class="iconfont icon-sucaizhongxin">素材</i>
                </template>
                <material />
                <!--素材库占位符-->
              </el-submenu>
              <!--文字-->
              <el-submenu index="文字">
                <template slot="title">
                  <i class="iconfont icon-wenzi- ">文字</i>
                </template>
                <bubble-box />
              </el-submenu>
              <!--贴纸-->
              <el-submenu index="贴纸">
                <template slot="title">
                  <i class="iconfont icon-ziyuan">贴纸</i>
                </template>
                <sticker />
                <!--贴纸占位符-->
              </el-submenu>
              <!--历史-->
              <el-submenu index="历史">
                <template slot="title">
                  <i class="iconfont icon-yemiankuangjia">历史</i>
                </template>
                <history />
                <!--页面占位符-->
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </div>
      <div id="canvas-box">
        <div class="button">
          <button @click="saveToJson" id="save-button" class="save-button">
            保存
          </button>
          <button @click="saveToPng" id="save-button2" class="save-button">
            导出图片
            {{ canvasStyle }}
          </button>
        </div>
        <Button type="primary" class="create-canvas" v-if="buttonShow" @click="createCanvas">新建画布</Button>
        <canvas-box id="canvas-view" v-show="canvasShow" :canvasStyle="canvasStyle" :style="{ backgroundImage: 'url(' + canvasBackgroundImg + ')' }" />
      </div>
    </div>
  </div>
</template>
<script>
import Header from '@/components/home/header.vue'
import canvasBox from './canvas/NotebookCanvas.vue'
import material from './edit/Material.vue'
import sticker from './edit/Sticker.vue'
import bubbleBox from './edit/BubbleBox.vue'
import history from './edit/History.vue'
export default {
  name: 'Design',
  data () {
    return {
      // 控制按钮显示
      buttonShow: true,
      // 控制黑色背显示
      bgShow: false,
      // 控制画布显示
      canvasShow: false,
      // 控制对话框显示
      dialogueShow: false,
      canvasSize: {
        width: '500',
        height: '700'
      },
      // 画布样式绑定
      canvasStyle: {
        width: '0',
        height: '0'
      },
      canvasBackgroundImg: '../../static/画布.jpeg'
    }
  },
  components: {
    canvasBox,
    material,
    sticker,
    bubbleBox,
    Header,
    history
  },
  methods: {
    isChecked (e) {
      var checked = e.target.checked
      var select = document.querySelector('.select')
      if (!checked) {
        select.setAttribute('disabled', 'disabled')
      } else {
        select.removeAttribute('disabled')
      }
      // console.log(select[select.selectedIndex].value)
    },
    changeSizeBaseOnRatio () {
      var select = document.querySelector('.select')
      var slContent = select[select.selectedIndex].value
      var checked = document.querySelector('.check-box').checked
      // console.log(slContent, select.selectedIndex)
      if (checked && select.selectedIndex !== 0) {
        if (this.canvasSize.width !== '') {
          this.canvasSize.height = parseInt((this.canvasSize.width / slContent[0]) * slContent[2])
        }
      }
    },
    // 点击创建画布弹出黑色透明背景和画布设置对话框
    initCanvas () {
      // 初始化画布，修改背景为默认背景
      ;[this.buttonShow, this.bgShow, this.canvasShow, this.dialogueShow] = [true, false, false, false]
      this.canvasStyle.height = '0'
      this.canvasStyle.width = '0'
      this.canvasSize.width = '500'
      this.canvasSize.height = '700'
      // 清空画布后，讲canvasShow的状态一变化就要传给bus，history组件要用
      this.$bus.canvasShow = false
      this.canvasBackgroundImg = '../../static/画布.jpeg'
    },
    createCanvas () {
      // 点击新建画布后更新信息
      this.bgShow = true
      this.dialogueShow = true
      this.buttonShow = false
    },
    updateCanvasBackgroundImg () {
      // 更新画布的背景，如果路由参数中不携带背景图，则背景图为默认值
      if (typeof this.$route.params.url === 'undefined') {
        this.canvasBackgroundImg = '../../static/画布.jpeg'
      } else {
        this.canvasBackgroundImg = this.$route.params.url
      }
      // this.createCanvas()
      this.$store.state.canvasData.setBackgroundUrl(this.canvasBackgroundImg)
    },
    // 点击取消或者右上角×关闭对话框和黑色背景
    closeDialogue () {
      this.bgShow = false
      this.dialogueShow = false
      this.buttonShow = true
    },
    // 对话框确认按钮将动态绑定的canvasSize传值给canvasStyle并渲染出画布
    confirmCanvas () {
      this.canvasShow = true
      this.bgShow = false
      this.dialogueShow = false
      this.buttonShow = false
      this.canvasStyle.width = this.canvasSize.width / 14.4 + 'vw'
      this.canvasStyle.height = this.canvasSize.height / 8.21 + 'vh'
      this.$bus.canvasShow = true
      this.$store.state.canvasData.setSize(this.canvasSize.width, this.canvasSize.height)
    },
    // 下面两个空函数别删，应该是element-ui必须要求的，不然会爆红，不好看
    handleOpen () {},
    handleClose () {},
    // 保存画布
    saveToJson () {
      // 若画布未创建或未添加内容，则退出
      if (!this.canvasShow || !this.$store.state.canvasData.layers.length) {
        this.$Message.info('没有可以保存的内容！')
        return
      }
      if (confirm('确定保存?')) {
        // 保存后向oldData中存储信息，并清空当前画布，初始化画布
        this.$store.state.oldData.push(this.$store.state.canvasData.toJSON())
        this.$store.state.canvasData.layers = []
        this.initCanvas()
        this.$Message.info('保存成功！可以在历史查看保存记录哦')
      }
    },
    saveToPng () {
      if (!this.canvasShow || !this.$store.state.canvasData.layers.length) {
        this.$Message.info('没有可以导出的内容！')
        return
      }
      for (const child of this.$children) {
        child.$emit('saveImg')
      }
    },
    // 点击历史中的任一保存过的图片后，调用该函数，更新画布背景
    // canvasData包含背景图，画布高宽
    historyImgClick (canvasData) {
      this.canvasBackgroundImg = canvasData.backgroundUrl
      // 重新计算画布大小
      this.canvasSize.width = canvasData.width
      this.canvasSize.height = canvasData.height
      this.canvasStyle.width = this.canvasSize.width / 14.4 + 'vw'
      this.canvasStyle.height = this.canvasSize.height / 8.21 + 'vh'
    }
  },
  mounted () {
    // 更新背景图
    this.updateCanvasBackgroundImg()
    // 监听历史页面的点击事件
    this.$bus.$on('historyimgclick', this.historyImgClick)
  },
  beforeDestroy () {
    this.$store.state.canvasData.layers = []
  },
  // 以下为路由守卫
  beforeRouteLeave (to, from, next) {
    if (this.$store.state.canvasData.layers.length) {
      if (confirm('当前有内容未保存,确定离开吗?')) {
        next()
      }
    } else {
      next()
    }
  }
}
</script>
<style lang="less" scoped>
.same_height {
  // display: flex;
  background-color: #ffffff;
}
.iconfont {
  font-weight: 600;
  color: #efaf67;
}
.bg {
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 12;
}
.wrap {
  display: flex;
  justify-content: space-between;
}
.design-panel {
  float: left;
  width: 6.9vw;
  height: 92vh;
}
.create-canvas {
  width: 7.944vw;
  height: 4.65vh;
  color: #fff;
  background-color: #efaf67;
  border: none;
  border-radius: 4px;
}
.el-menu-vertical-demo {
  width: 6.9vw;
  min-height: 92vh;
}
.el-submenu:first-child {
  margin-top: 2vh;
}
.el-submenu {
  background-color: #ffffff;
  border-radius: 5px;
  margin-top: 3vh;
}
.el-submenu:hover {
  background-color: rgba(135, 206, 235, 1);
}
.setting-dialogue {
  position: fixed;
  left: 50%;
  margin-left: -16.78vw;
  top: 22.18vh;
  background-color: #fff;
  width: 35.56vw;
  height: 30.9vh;
  z-index: 20;
  .dialogue-header {
    position: absolute;
    top: 0;
    height: 4.26vh;
    width: 100%;
    border-bottom: 2px solid #d6d8dd;
    line-height: 4.26vh;
    .dialogue-header-left {
      font-weight: bold;
      font-size: 1.7vh;
      color: #000;
      margin-left: 1.39vw;
    }
    .dialogue-header-right {
      position: absolute;
      top: -0.24vh;
      right: 0.69vw;
      font-size: 3vh;
      user-select: none;
      cursor: pointer;
    }
  }
  .dialogue-body {
    position: absolute;
    top: 4.26vh;
    height: 26.64vh;
    width: 100%;
    .sizeIpt {
      margin-top: 7.3vh;
      display: flex;
      justify-content: center;
      input {
        width: 6.94vw;
      }
      span {
        margin-left: 0.69vw;
      }
      .canvas-width {
        margin-right: 2.08vw;
      }
    }
    .aspect-ratio {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 2.5vh;
      .check-box {
        width: 2vh;
        height: 2vh;
        margin-right: 1vw;
      }
    }
    .dialogue-button {
      display: flex;
      justify-content: center;
      margin-top: 4.52vh;

      .dialogue-cancel {
        background-color: white;
        color: #efaf67;
        margin-left: 2.78vw;
        border-color: #efaf67;
      }
      .dialogue-confirm {
        background-color: #efaf67;
        border: none;
      }
    }
  }
}
#canvas-box {
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 93.1vw;
  height: 92.2vh;
  background-color: #d6d8dd;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#canvas-view {
  width: 70vw;
  height: 90vh;
  background-color: #ffffff;
}
#go-back {
  width: 5vw;
  height: 2vh;
  position: absolute;
  left: 95vw;
  z-index: 99;
}
.save-button {
  position: absolute;
  width: 8vw;
  top: 12vh;
  left: 8vw;
  color: #efaf67;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 5px;
}
.save-button:hover {
  background-color: rgba(135, 206, 235, 1);
}
#save-button2 {
  top: 16vh;
}
#canvas-view {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>
